<template>
    <div class="baseList">

        <div class="newBox">
            <button class="bt wt-120" @click="handleBulid()">
                新增护理项目
            </button>
        </div>

        <div class="tableBoxs">
            <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
            <t-table row-key="index" :data="data" :columns="COLUMNS" :stripe="stripe" :bordered="bordered"
                :hover="hover" :table-layout="tableLayout ? 'auto' : 'fixed'" :size="size" :show-header="showHeader"
                cell-empty-content="-" resizable>

                <template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template>

                <template #image="{ row }">
                    <div class="tdesign-demo-image-viewer__base">
                        <t-image-viewer :images="[row.image]">
                            <template #trigger="{ open }">
                                <div class="tdesign-demo-image-viewer__ui-image">
                                    <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                                    <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                                        <span>
                                            <BrowseIcon size="1.4em" /> 预览
                                        </span>
                                    </div>
                                </div>
                            </template>
                        </t-image-viewer>
                    </div>
                </template>

                <!-- 价格拼接 -->
                <template #price="{ row }">
                    {{ isDecimals(row.price) ? row.price : row.price + '.00' }}
                </template>

                <!-- 操作栏 -->
                <template #op="{ row }">
                    <t-space direction="vertical">
                        <t-space>
                            <t-link theme="danger" hover="underline" @click="handleClickDelete(row)" > 删除 </t-link>
                            <t-link theme="success" hover="underline" @click="handleEdit(row)"> 编辑 </t-link>
                            <t-link :theme="row.status===1?'danger':'default'" hover="underline" @click="handleForbidden(row)"> {{ row.status === 1 ? '禁用' : '启用' }} </t-link>
                        </t-space>
                    </t-space>
                </template>


            </t-table>

            <!-- 分页 -->
            <t-pagination v-if="total > 10" v-model="pagination.pageNum" v-model:pageSize="pagination.pageSize"
                :total="total" @change="onPageChange" />

        </div>
    </div>
</template>

<script setup lang="jsx">
import { COLUMNS } from '../constants'

// 子组件需要让父组件传递属性

const props = defineProps({
    data: {
        type: Object,
        default: () => {
            return {}
        }
    },
    // 总条数
    total: {
        type: Number,
        default: 0
    },
    pagination: {
        type: Object,
        default: () => {
            return {}
        }
    }
})


//在js代码中添加isDecimals方法，判断当前字段是否包含了小数点
const isDecimals = (val) => {
    if (String(val).indexOf('.') > -1) {
        return true
    }
    return false
}

import { ref } from 'vue';
const stripe = ref(true);
const bordered = ref(true);
const hover = ref(false);
const tableLayout = ref(false);
const size = ref('medium');
const showHeader = ref(true);


// 子组件需要调用父组件的方法
//声明方法
const emit = defineEmits([
    'onPageChange','handleBulid','handleEdit','handleClickDelete','handleForbidden'
])

//点击翻页
const onPageChange = (val) => {
    emit('onPageChange', val)
}


//新增按钮
const handleBulid = () =>{
 emit('handleBulid')
  console.log("表格页面接到了点击新增按钮事件")
}

//编辑   参数为一行数据
const handleEdit = (row) =>{
  emit('handleEdit', row)
}

// 禁用
const handleForbidden = (row) => {
  emit('handleForbidden', row)
}

// 点击删除
const handleClickDelete = (row) => {
  emit('handleClickDelete', row)
}
  
</script>